<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">创建巡查计划</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm"
                :inline="true">
            <el-form-item label="查询条件:">
                <el-input v-model="year" placeholder="输录年份"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryYear" type="primary">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="items">
            <el-table-column
                    prop="ayear"
                    label="年份"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="bdate"
                    label="计划巡查日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="bcompany"
                    label="计划巡查公司">
            </el-table-column>
            <el-table-column
                    prop="bname"
                    label="计划巡查人">
            </el-table-column>
            <el-table-column
                    prop="cdate"
                    label="实际巡查日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="ccompany"
                    label="实际巡查公司">
            </el-table-column>
            <el-table-column
                    prop="cname"
                    label="实际巡查人">
            </el-table-column>

            <el-table-column prop="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.hasinspect==='1'"  type="success">已完成</el-tag>
                    <el-tag v-if="scope.row.hasinspect==='0'"  type="warning">未完成</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                year:'',
                // 对比数据
                items:[]
            }
        },
        //函数集群
        methods: {
            queryYear(){
                axios.get(`/yyds/machine_system/mc-plan0/statis-ticsdaily/patrol/${this.year}`).then(response=>{
                    this.items = response.data.map.items
                })
            }
        }
    })
</script>
</body>
</html>